<template>
    <div>
        <el-row>
          <el-col :span="12">
            <h2> <strong>考试记录</strong></h2>
          </el-col>
          <el-col :span="12">
            <el-button-group class="div-header">
                <el-button text @click=rollback>返回</el-button>
                <el-button text @click=refresh>刷新</el-button>
            </el-button-group>
          </el-col>
        </el-row>
        <el-row style="margin-top: 8xp;color: #aaa;">
          <p  style="margin: 0 0 10px;">从以下列表查看和管理考生的答卷记录</p>
        </el-row>
        <el-row>
            <el-descriptions
            wrap
            :column="1"
            border
            class="header-des"
            style="width: 50%;"
            >
                <el-descriptions-item label="考试名称"   align="center" 
                label-class-name="my-label">
                   <a>  {{ headerData.testPaperName }}</a>
                </el-descriptions-item>
                <el-descriptions-item label="考试时间"   align="center">
                    <a>{{ headerData.startTime }}</a>
                    <span style="text-align: center;font-size: 13px;">到</span>
                    <a>{{ headerData.endTime }}</a>
                </el-descriptions-item >
                <el-descriptions-item label="考试时长"   align="center">
                    <a>12分钟</a>
                </el-descriptions-item>
                <el-descriptions-item label="卷面总分"   align="center">
                    <a>100</a>分(及格:<a>60.0</a>)
            </el-descriptions-item>
            </el-descriptions>
        </el-row>
    <!--表格头部查询及按钮组  -->
    <el-row style="margin-top: 20px;"   >
      <el-col :span="14" >
        <el-input v-model="queryHeader.keyword" placeholder="关键字" class="w120 mr8"></el-input>
        <el-select-v2
            v-model="queryHeader.examineeGroup"
            placeholder="所在班级"
            class="w120 mr8"
            filterable
            clearable
            remote
            reserve-keyword
            :options="options.examineeGroups"
            :remote-method="remoteMethod" 
            :loading="loading" 
            
        />
        <el-select v-model="queryHeader.duty" class="w120 mr8" placeholder="职务" suffix-icon >
            <el-option  v-for="item in options.duties"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        <el-select
            v-model="query.sortord"
            class="w120 mr8"
            placeholder="交卷时间从早到晚"
            suffix-icon
        >
        <el-option  v-for="item in options.sorts"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
    </el-select>
    <el-select v-model="queryHeader.show"  class="w120 mr8"   placeholder="显示全部答案"
            suffix-icon >
        <el-option  v-for="item in options.showStyle"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
    </el-select>
    <el-button color="#1C84C6">查询</el-button>
    </el-col>
    <el-col :span="10"  class="btn-div">
        <div class="demo-progress">
            <p>进度：</p>
             <el-progress
            :text-inside="true"
            :stroke-width="24"
            :percentage="80"
            striped
            status="success"></el-progress>
        </div>
        <el-button-group class="btn-2">
            <el-tooltip content="将考生成绩到处为Excel" placement="bottom" effect="light">
                <el-button color="#1C84C6"  @click="exportExcel"> <i class="iconfont icon-file-excel-o1"></i></el-button>
            </el-tooltip>
            <el-tooltip content="导出所有学生答案" placement="bottom" effect="light">
                <el-button color="#ED5565" @click="exportAnswer"> <i class="iconfont icon-file-zip-o1 white"></i></el-button>
            </el-tooltip>
            <el-tooltip content="查看缺考名单" placement="bottom" effect="light">
                 <el-button color="#23C6C8" @click="showMissList"><i class="iconfont icon-user-times white"></i></el-button>
            </el-tooltip>
            <el-tooltip content="快速批改主观题" placement="bottom" effect="light">
                <el-button color="#F8AC59"  @click="quickCorrection">  <i class="iconfont icon-clone1 white"></i></el-button>
        </el-tooltip>
        </el-button-group>
    </el-col>
    </el-row>  

<!--考生考试考试信息表格 -->
<el-table ref="multipleTableRef" 
	:header-cell-style="{color:'#2A62BC'}"
	:data="tableData"   
	style="width: 100%;" 
    size="small"
    border
	@selection-change="handleSelectionChange">
        <el-table-column   type="selection" width="35" />
		<el-table-column  prop="name" label="考生"  align="center">
			<template #default="scope">
                <p>{{scope.row.examinee  }}</p>
			     <p class="p13">{{ scope.row.name }}</p>	
				</template>
		</el-table-column>
		<el-table-column  prop="examineeGroup" label="所在班级"  align="center"></el-table-column>
		<el-table-column  prop="idNumber" label="手机号"  align="center"></el-table-column>
        <el-table-column   label="考试用时"  align="center">
			<template #default="scope">
                <p>{{scope.row.startTime  }}</p>
			    <p class="p13">{{ scope.row.endTime }}</p>	
			</template>
		</el-table-column>
        <el-table-column   label="考试时间"  align="center">
            <template #default="scope">
                <span class="test-success">{{scope.row.examTime}}</span><span>分钟</span>
			</template>
        </el-table-column>
        <el-table-column label="批改状态" align="center">
            <template #default="scope">
                <el-switch
                        v-model="scope.row.state"
                        :active-value="'正常'"
                        :inactive-value="'待审核'"
                        active-color="#64bd63"
                        inactive-color="#c0c0c0"                   
                        @change="changeSwitch(scope.row.state)"/>
			</template>
        </el-table-column>
		<el-table-column  label="得分" align="center">
			<template #default="scope">
				<a class="test-success" v-if="scope.row.score>=80">{{ scope.row.score}}</a>
				<a class="test-waring" v-else-if="scope.row.score>=60">{{ scope.row.score}}</a>
				<a class="test-danger" v-else>{{ scope.row.score}}</a>
			</template>
		</el-table-column>
        <el-table-column label="来源" align="center">
			<template #default="scope">
			<p> <i class="iconfont icon-list-alt3"></i>{{  scope.row.source }}</p>	
			</template>
		</el-table-column>
		<el-table-column label="操作"  align="center" >
			<template #default="scope">
				<el-button-group class="right-btn">
					<el-tooltip content="批阅试卷" placement="bottom" effect="light">
				    <el-button  style="color: #1c64c6; font-family: 900;" :icon="Edit" @click="markExam(scope.row)" >
                      </el-button>
					</el-tooltip>
					<el-tooltip content="删除" placement="bottom" effect="light">
		            <el-button  style="color: #Ed5565; font-family: 900;" :icon="Delete" @click="handleDelete(scope.$index)">
                    </el-button>
				</el-tooltip>
				</el-button-group>
			</template>
		</el-table-column>
	</el-table>
			<!-- 分页 -->
			<div class="pagination">
				<el-pagination
				:current-page="query.pageIndex"
					:page-size="query.pageSize"
					:page-sizes="[5, 10, 15, 20]"
					size="small"
					layout="total, sizes, prev, pager, next, jumper"
					:total="pageTotal"
					@size-change="handleSizeChange"
					@current-change="handlePageChange"/>
			</div>
	

    </div>
   
    <!-- 关联考试的弹窗 -->
	 <el-dialog title="缺考名单" v-model="isMissVisible" width="775" :fullscreen="isFullScreen">
		<template #header="{ close, titleId, titleClass }">
			<div class="my-header">
				<h3 :id="titleId" :class="titleClass">缺考名单</h3> 
			</div>
			</template>
            <MissExam></MissExam>
            <template #footer>
			<span class="dialog-footer">
				<el-button  color="#1C84C6" @click="isMissVisible = false">关闭</el-button>
			</span>
		</template>
	</el-dialog>
    <!-- 批阅试卷的弹窗 style="height: 400px; overflow-y: scroll;"-->
	 <el-dialog title="批阅试卷" v-model="isMarkVisible" width="70%"  :destroy-on-close="true"   :show-close="false" :fullscreen="isFullScreen">
		<template #header="{ close, titleId, titleClass }">
			<div class="my-header">
				<span :id="titleId" :class="titleClass">《{{ markTitle }}的答卷详情》---第1/3次考试</span>
                <el-button-group>
                    <el-button text><i class="iconfont icon-suoxiao"></i></el-button>
                    <el-button text v-if="isFullScreen" @click="isFullScreen=!isFullScreen"><i class="iconfont icon-huifu" ></i></el-button>
                    <el-button text v-else  @click="isFullScreen=!isFullScreen"><i class="iconfont icon-ic_fullscreen" ></i></el-button>
                   
                    <el-button  text @click="close"><i class="iconfont icon-close2"></i></el-button>
            </el-button-group>
			</div>
			</template>
            <PaperTestShow :stu-paper-info="stuPaperInfo"></PaperTestShow>   
	</el-dialog>
    <!-- 快速批改主观题的弹窗-->
	 <el-dialog title="快速批改主观题" v-model="isQuickVisible" width="70%"  :destroy-on-close="true"   :show-close="false" :fullscreen="isFullScreen">
		<template #header="{ close, titleId, titleClass }">
			<div class="my-header">
				<span :id="titleId" :class="titleClass">《快速批改主观题》---该功能仅用于提高
                主观题的人工批改效率,其拍该效果与"批阅试卷"功能相同</span>
                <el-button-group>
                    <el-button text><i class="iconfont icon-suoxiao"></i></el-button>
                    <el-button text v-if="isFullScreen" @click="isFullScreen=!isFullScreen"><i class="iconfont icon-huifu" ></i></el-button>
                    <el-button text v-else  @click="isFullScreen=!isFullScreen"><i class="iconfont icon-ic_fullscreen" ></i></el-button>
                    <el-button  text @click="close"><i class="iconfont icon-close2"></i></el-button>
            </el-button-group>
			</div>
			</template>
            <PaperTestShow  :markType="markType"></PaperTestShow>   
	</el-dialog>
</template>

<script setup>
import {ref,reactive,toRefs,onMounted} from 'vue'
import { Delete, Edit } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getPaperInfo} from '../../../api/exam' ;
import MissExam from '@/views/exam/examSubVue/MissExam.vue'
import PaperTestShow from './PaperTestShow.vue';
/**接收考试管理组件传递的数据 */
const props = defineProps({
    headerData:Object,
    flag:String
})
const {headerData}  = toRefs(props)
console.log(headerData,'=======')
const emit  = defineEmits(['update:flag'])
/**点击返回按钮 */
const rollback=()=>{
    emit('update:flag','')
}
/**刷新按钮 */
const refresh=()=>{

}
// 定义属性 告诉组件 点击的是什么按钮
const  markType=ref('zg')

/**关键字  考生组 职务 交卷时间从早 显示全部答案*/
const  queryHeader=reactive({
    'keyword':'',//关键字
    'examineeGroup':'',//考生组
    'duty':'', //职务
    'sortord':'', //排序方式
    'show':''//显示全部答案
})
//相关数据
const options=reactive({
    examineeGroups:[
        {
            value:'扬州公司',
            label:'扬州公司'
        },
        {
            value:'苏州分公司',
            label:'苏州分公司'
        },
        {
            value:'无锡分公司',
            label:'无锡分公司'
        },
    ],
    duties:[
        {
            value:'考生',
            label:'考生'
        },
        {
            value:'初级开发工程师',
            label:'初级开发工程师'
        },
        {
            value:'中级开发工程师',
            label:'中级开发工程师'
        }
    ],
    sorts:[
        {
            value:'交卷从早到晚',
            label:'交卷从早到晚'
        },
        {
            value:'交卷从晚到早',
            label:'交卷从晚到早'
        },
        {
            value:'用时从多到少',
            label:'用时从多到少'
        },
        {
            value:'用时从少到多',
            label:'用时从少到多'
        },
    ],
    showStyle:[
        {
            value:'显示全部答案',
            label:'显示全部答案'
        },
        {
            value:'仅显示最高分记录',
            label:'仅显示最高分记录'
        },
        
    ],
})
const loading=ref(false)
const list = ref([])
onMounted(() => {
  list.value = states.map((item) => {
    return { value: `${item}`, label: `${item}` }
  })
})
const states = [
  '扬州分公司',
  '苏州分公司',
  '无锡分公司',
  '上海公司',
  '南京公司',
]
const remoteMethod = (word) => {
    console.log('word',word)
  if (word) {
    loading.value = true
    setTimeout(() => {
      loading.value = false
      options.examineeGroups = list.value.filter((item) => {
        return item.label.toLowerCase().includes(word.toLowerCase())
      })
    }, 1000)
  } else {
    options.examineeGroups = []
  }
}



//分页字体
const small = ref(true)
//分页数据
const query = reactive({
	pageIndex: 1,
	pageSize: 5,
});
//

//表格数据
const tableData = ref();
//总页数
const pageTotal = ref(0);
const multipleTableRef = ref()
const state = reactive({
	multipleSelection:[]
})

// 获取表格数据  分页是数据截取  后台结合一起后  直接返回分页的后的数据
const getData = () => {
    getPaperInfo({pageCurrent:query.pageIndex,pageSize:query.pageSize}).then(res=>{
        console.log(res,"---res---")
        // tableData.value = res.data.
		let start  = (query.pageIndex-1)*query.pageSize;//开始位置
        let end =query.pageIndex*query.pageSize  ;//结束位置 数组的截取的时候 [start,end) suo所以不用-1
        tableData.value = res.data.slice(start,end);
        // tableData.value = res.data;
        pageTotal.value = res.data.length
    })
	
};
getData();
//多选框权限
const handleSelectionChange = (val) => {
  state.multipleSelection = val
}
// 分页导航
const handleSizeChange = (val) => {
  // console.log(`${val} items per page`)
  query.pageSize = val;
  getData()
}
const handlePageChange = (val) => {
	query.pageIndex = val;
	console.log(val,"==")
	console.log(query.pageSize)
	getData()
};


//是够启用调用后台接口
const  changeSwitch=(status)=>{
    //调用后台修改接口
    console.log(status,'>>>status');
}

// 删除单个操作
const handleDelete = (index) => {
	// 二次确认删除
	ElMessageBox.confirm('确定要删除吗？', '提示', {
		type: 'warning'
	})
	.then(() => {
		ElMessage.success('删除成功');
		//to 传递id 到后台 
		tableData.value.splice(index, 1);
		// 删除成功后
		// getData()
	})
	.catch(() => {});
};

/**按钮组的相关点击事件 */
//导出考生成绩
const exportExcel=()=>{
    ElMessageBox.confirm(
    '<Strong>该操将导出考生EXCEL表格,<br/>如果数据较多可能需要较长的时间。</Strong>',
    '确定要导出考生成绩吗？',
    {
      confirmButtonText: '导出',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
      center:true,
      dangerouslyUseHTMLString: true,
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '它将永久导出信息',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消导出',
      })
    })

}

//导出考生答案
const exportAnswer=()=>{
    ElMessageBox.confirm(
    '<Strong>该操将导出所有考生答案压缩包,如果数据较多可能需要较长的时间。</Strong>',
    '确定要导出所有考生答案吗？',
    {
      confirmButtonText: '导出',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
      center:true,
      dangerouslyUseHTMLString: true,
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '导出成功',
      })
    })
}
//缺考名单的单框
const isMissVisible= ref(false)
const showMissList=()=>{

    isMissVisible.value=true;
}
//快速批改主观题
const isQuickVisible = ref(false)
const quickCorrection=()=>{
    isQuickVisible.value=true;
}
/***********批阅试卷的弹窗************ */
const isMarkVisible = ref(false)
const markTitle = ref('')
const stuPaperInfo=ref()
const  markExam=(row)=>{
    markTitle.value=row.name
    stuPaperInfo.value=row
    stuPaperInfo.value.testPaperName01=headerData.value.testSubjects
    console.log(headerData.value.testSubjects,'=================ttt')
    isMarkVisible.value=true
}

/***阅卷弹框头部按钮 */
const isFullScreen = ref(false)

</script >
<style lang="less" scoped>
.div-header{
    float: right;
    justify-content: center;
    text-align: center;
}
.header-des{
    a{
        cursor: pointer;
        color: #337ab7;
        text-decoration: none;
        background-color: transparent;
    }
}
:deep(.my-label) {
  background: #E6E6E6;
}
.w120{
    width: 110px;
}
.mr8{
 margin-right: 5px;
}
.demo-progress{
    display: inline-block;
    float: left;
}
.demo-progress p{
    display: inline;
    float: left;
    text-align: center;
}
.demo-progress .el-progress--line {
//   margin-bottom:20;
  width: 165px;
  margin-right: 8px;
}
.white{
    color:#fff;
}

.btn-2{
    float: left;
    display: inline;
    .el-button{
        border-radius: 3px;
        margin-right: 5px;
    }
}
.btn-div{
    margin-bottom: 20px;
}
.p13{
    color: #888888;
}
.test-success{
	font-size: 20px;
	color: #1c84c6;
	font-weight: 700;
}
.test-waring{
	font-size: 20px;
	color: #F8AC59;
	font-weight: 700;
}
.test-danger{
	font-size: 20px;
	color: #ED5565;
	font-weight: 700;
}

.right-btn{
 	justify-content:center;
	.el-button{
		height: 22px;
		// width: 60px;
		margin-right: 10px;
		padding: 1px 5px;
	}
}
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px  solid #f0f0f0;
}
</style>